/*
 * @Author: 18163104359 2205227953@qq.com
 * @Date: 2024-01-24 09:03:51
 * @LastEditors: 18163104359 2205227953@qq.com
 * @LastEditTime: 2024-01-24 18:20:37
 * @FilePath: /umi/src/layouts/components/BreadcrumbPage/index.jsx
 * @Description: 面包屑
 */
import React, { useState, useEffect } from "react";
import {
  connect,
  useAppData,
  history,
  useRouteProps,
  useSelectedRoutes,
  useSearchParams,
  useLocation,
  useRoutes,
} from "umi";
import { Breadcrumb } from "antd";
import { FormProvider } from "antd/es/form/context";
import { NavLink } from "umi";

const BreadcrumbPage = (props) => {
  const { dispatch, appConfig } = props;
  const r = useSelectedRoutes();
  // 判断是否为目录 返回可用的数据
  const menuTypeRes = (val) => {
    if (val.route.path == "/") return <NavLink to="/index">首页</NavLink>;
    else if (val.route.menuType == "M") {
      return (
        <a target="_blank" rel="noopener noreferrer">
          {val.route.label || val.route.name}
        </a>
      );
    } else {
      return (
        // onClick={toPath(val.route.path)}
        <NavLink to={val.route.path} rel="noopener noreferrer">
          {val.route.label || val.route.name}
        </NavLink>
      );
    }
  };

  // 面包屑子集
  const children = (val) => {
    if (!Array.isArray(val) && !val) return console.log("面包屑子集");
    return {
      items: val
        .filter((t) => t.path != history.location.pathname)
        .map((t, index) => ({
          key: t.key + index,
          title: childrenMenu(t),
        })),
    };
  };

  // 面包屑子集判断目录
  const childrenMenu = (val) => {
    if (val.menuType == "M")
      return (
        <a target="_blank" rel="noopener noreferrer">
          {val.label}
        </a>
      );

    return (
      <NavLink target="_blank" rel="noopener noreferrer" to={val.path}>
        {val.label}
      </NavLink>
    );
  };

  //
  const itemsInit = () => {
    if (r[1].pathname == "/index") {
      return [r[0]];
    }

    return r.map((t, index) => ({
      key: t.route.path + index,
      title: menuTypeRes(t),
      menu: t.route.menuType == "M" ? children(t.route.children) : false,
    }));
  };
  useEffect(() => {}, []);

  return <Breadcrumb items={itemsInit()} />;
};
export default connect((state) => ({ appConfig: state.appConfig }))(BreadcrumbPage);
